<template>
  <div class="container">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in carouseData" :key="item">
        <img :src="item.url" alt=""/>
      </el-carousel-item>
    </el-carousel>
  <div class="tableBar" style="margin-top:5px;">
    <el-button type="primary" @click="enter" :icon="Search">国内,国际/进港航班信息</el-button>
    <el-button type="primary" @click="out" style="margin-right:800px;" :icon="Search">国内,国际/出港航班信息</el-button>
  </div>
  <el-alert
    title="航班实时信息显示屏"
    type="success"
    description="你乘坐的飞机在登机牌上会显示相应的登机口,根据登机牌所显示的登机口号在相应的候车厅候机休息,听广播提示进行登机.....">
  </el-alert>
  <el-table :data="tableData" class="tableBox" :row-class-name="tableRowClassName">
    <el-table-column prop="cfno" label="航班号" align="center"></el-table-column>
    <el-table-column prop="endapcd" label="终点站" align="center"></el-table-column>
    <el-table-column prop="startfptt" label="预计起飞时间" align="center"></el-table-column>
    <el-table-column prop="fcdp" label="柜台" align="center"></el-table-column>
    <el-table-column prop="endfplt" label="预计到达日期" align="center"></el-table-column>
    <el-table-column prop="abrs" label="航班实时动态" align="center"></el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />
<br>
  <el-row>
		<span style="font-size:20px;">游世界</span>
	    <el-col :span="24"><div class="grid-content bg-purple-dark"><img src="@/assets/imgs/flight/bottom1.png" style="width:1140px;"/></div></el-col>
	  </el-row>
    
    <br><br><br><br><br><br>s
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search } from "@element-plus/icons";
import request from '@/utils/request';

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const carouseData = [
  {url: require("@/assets/imgs/flight/img_2.png")},
  {url: require("@/assets/imgs/flight/3.jpg")},
]
const input = ref('')

const fetchData = ()=>{
  request({
    url: '/fquery',
    method: 'GET',
    params: {
      page: currentPage.value,
      pageSize: pageSize.value
    }
  }).then(req => {
    if (200 == req.data.errorCode) {
      tableData.value = req.data.data.records
      total.value = req.data.data.total
    }
  })

}

const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
  .container {
    max-height: 100vh;
    overflow-y: auto;
  }
.tableBar {
  display: flex;
  text-align: left;
  margin: 10px 0; 
}
  .info1 {
    display: flex;
    text-align: left;
    margin: 10px 0; /* 使info1之间有间距，更美观 */
  }

  .el-carousel__container {
    height: 400px; /* 根据需要调整carousel的高度 */
  }

  .el-carousel__item img {
    width: 100%;
    height: auto;
  }
</style>
